<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Divider orientation="center">基本信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>手机号码：{{ orderInfo.orderMall.username }}</div>
        </Col>
        <Col span="12">
          <div>规格：{{ orderInfo.orderMall.goodsNum }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>取件联系人：{{ orderInfo.orderMall.takeMan }}</div>
        </Col>
        <Col span="12">
          <div>取件联系电话：{{ orderInfo.orderMall.takePhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            取件地址：
            {{ orderInfo.orderMall.takeProvince }}
            {{ orderInfo.orderMall.takeCity }}
            {{ orderInfo.orderMall.takeCounty }}
            {{ orderInfo.orderMall.takeAddress }}
          </div>
        </Col>
        <Col span="12">
          <div>取衣时间：{{ orderInfo.orderMall.takeDeliveryTime }}</div>
        </Col>
      </Row>

      <Row :gutter="16">
        <Col span="12">
          <div>送衣联系人：{{ orderInfo.orderMall.backMan }}</div>
        </Col>
        <Col span="12">
          <div>送衣联系电话：{{ orderInfo.orderMall.backPhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            送衣地址：
            {{ orderInfo.orderMall.backProvince }}
            {{ orderInfo.orderMall.backCity }}
            {{ orderInfo.orderMall.backCounty }}
            {{ orderInfo.orderMall.backAddress }}
          </div>
        </Col>
        <Col span="12">
          <div>送衣时间：{{ orderInfo.orderMall.backDeliveryTime }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          洗护状态：
          <template v-if="orderInfo.orderMall.orderState == 3">
            待工厂收件
          </template>
          <template v-if="orderInfo.orderMall.orderState == 4">
            清洗中
          </template>
          <template v-if="orderInfo.orderMall.orderState == 30">
            已完成
          </template>
        </Col>
      </Row>
      <Divider orientation="center">物流信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件物流：{{ orderInfo.sendLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.sendLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.sendLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.sendLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>取件物流单号：{{ orderInfo.sendLogistics.logisticsNum }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>收件物流：{{ orderInfo.backLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.backLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.backLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.backLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>收件物流单号：{{ orderInfo.backLogistics.logisticsNum }}</div>
        </Col>
      </Row>

      <Divider orientation="center">工厂备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <div>{{ orderInfo.orderMall.factoryRemark }}</div>
        </Col>
      </Row>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button type="primary" @click="hide()" :loading="loadingBtn">
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'order-ope',
    data() {
      return {
        isShowModal: false,
        loadingBtn: false,
        orderInfo: {
          orderMall: {},
          sendLogistics: {},
          backLogistics: {}
        },
        goodsSkuInfo: {},
        title: '订单详情'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/factory/order/getOrderMallById', {
            params: { id: row.orderId }
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            res.data.sendLogistics = res.data.sendLogistics || {};
            res.data.backLogistics = res.data.backLogistics || {};
            this.orderInfo = res.data;
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      }
    }
  };
</script>

<style scoped lang="less">
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
